﻿@using StudentManagement.Extensions.Pagenation;
@model PagedData<Course>


<h3>@ViewBag.PageTitle</h3>

<form asp-action="Index" method="get">
    <div class="form-actions no-color">
        <p>
            请输入筛选条件:
            <input type="text" name="searchString" value="@ViewBag.FilterString" />
            <input type="submit" value="查询" class="btn btn-primary btn-sm" />
            <a asp-action="Index" class="btn btn-outline-dark btn-sm">显示全部课程</a>
            <a href="#addCourseModal" data-toggle="modal" class="btn btn-outline-dark btn-sm">添加课程</a>
        </p>
    </div>
</form>

<div class="table-responsive-sm">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th scope="col" class="sort-highlight">
                    <a asp-action="Index"
                       asp-route-sortby="CourseNo desc"
                       asp-route-searchString="@ViewBag.FilterString">
                        课程编号
                    </a>
                </th>
                <th>
                    <a asp-action="Index"
                       asp-route-sortby="Title desc"
                       asp-route-searchString="@ViewBag.FilterString">
                        课程名称
                    </a>
                </th>
                <th>
                    <a asp-action="Index"
                       asp-route-sortby="Credits desc"
                       asp-route-searchString="@ViewBag.FilterString">
                        学分
                    </a>
                </th>
                <th>操作</th>
            </tr>
        </thead>

        @if (Model.DataSource.Any()) {
            <tbody>
                @foreach (var course in Model.DataSource) {
                    <tr>
                        <td>@course.CourseNo</td>
                        <td>@course.Title</td>
                        <td>@course.Credits</td>
                        <td>
                            <a asp-action="details" asp-route-id="@course.Id" class="edit">
                                <span class="material-icons" title="浏览">
                                    search
                                </span>
                            </a>

                            <a href="#editCourseModel" data-toggle="modal" class="edit">
                                <span class="material-icons" title="编辑">
                                    mode_edit
                                </span>
                            </a>

                            <a href="#deleteCourseModel" data-toggle="modal" class="delete">
                                <span class="material-icons" title="删除">
                                    delete_forever
                                </span>
                            </a>

                            <!--隐藏的控件用于向modal form传递数据-->
                            <input type="hidden" class="id" value="@course.Id" />
                        </td>
                    </tr>
                }
            </tbody>
        }
    </table>

    @await Html.PartialAsync("_Pagination")
</div>

<!-- Add Modal Form -->
<div id="addCourseModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" asp-controller="course" asp-action="add">
                <div class="modal-header">
                    <h4 class="modal-title">添加课程</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>课程编号</label>
                        <input type="text" class="form-control" id="CourseNo" name="CourseNo" required />
                    </div>
                    <div class="form-group">
                        <label>课程名称</label>
                        <input type="text" class="form-control" id="title" name="title" required />
                    </div>
                    <div class="form-group">
                        <label>学分</label>
                        <input type="text" class="form-control" id="credits" name="credits" required />
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-success" value="Add">
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal Form -->
<div id="editCourseModel" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" asp-controller="course" asp-action="update">
                <div class="modal-header">
                    <h4 class="modal-title">修改课程</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>课程编号</label>
                        <input type="text" class="form-control" id="CourseNo" name="CourseNo" required />
                    </div>
                    <div class="form-group">
                        <label>课程名称</label>
                        <input type="text" class="form-control" id="title" name="title" required />
                    </div>
                    <div class="form-group">
                        <label>学分</label>
                        <input type="text" class="form-control" id="credits" name="credits" required />
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-success" value="保存">
                    <input type="hidden" id="id" name="id" />
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Modal Form -->
<div id="deleteCourseModel" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" asp-controller="course" asp-action="remove">
                <div class="modal-header">
                    <h4 class="modal-title">删除课程</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <p>确定删除该记录吗?</p>
                    <p class="text-warning"><small>删除后无法恢复.</small></p>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <input type="submit" class="btn btn-danger" value="Delete">
                    <input type="hidden" id="id" name="id" />
                </div>
            </form>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        $(document).ready(function () {
            // Activate tooltip
            $('[data-toggle="tooltip"]').tooltip();

            // Select/Deselect checkboxes
            var checkbox = $('table tbody input[type="checkbox"]');
            $("#selectAll").click(function () {
                if (this.checked) {
                    checkbox.each(function () {
                        this.checked = true;
                    });
                } else {
                    checkbox.each(function () {
                        this.checked = false;
                    });
                }
            });
            checkbox.click(function () {
                if (!this.checked) {
                    $("#selectAll").prop("checked", false);
                }
            });
        });

        $('table .delete').on('click', function () {
            var id = $(this).parent().find(' .id').val();
            $('#deleteCourseModel #id').val(id)
        });

        $('table .edit').on('click', function () {
            var id = $(this).parent().find(' .id').val();

            $.ajax({
                type: 'GET',
                url: "/course/find/" + id,
                success: function (course) {
                    $('#editCourseModel #id').val(course.id);
                    $('#editCourseModel #CourseNo').val(course.courseNo);
                    $('#editCourseModel #title').val(course.title);
                    $('#editCourseModel #credits').val(course.credits);
                }
            });
        });

    </script>
}



